---
title: Avatar Circles
date: 2024-05-22
description: Overlapping circles of avatars.
author: tomonarifeehan
published: true
---

<ComponentPreview name="avatar-circles-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @magicui/avatar-circles
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="avatar-circles" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Usage

```tsx showLineNumbers
import { AvatarCircles } from "@/components/ui/avatar-circles"
```

```tsx showLineNumbers
<AvatarCircles
  numPeople={99}
  avatarUrls={[
    {
      imageUrl: "https://avatars.githubusercontent.com/u/16860528",
      profileUrl: "https://github.com/dillionverma",
    },
  ]}
/>
```

## Props

| Prop        | Type     | Default | Description                                   |
| ----------- | -------- | ------- | --------------------------------------------- |
| `className` | `string` | `-`     | The class name to be applied to the component |
| `numPeople` | `number` | `99`    | The number appearing in the last circle       |
